<template>
  <div id="ledger">
    <div style="padding: 10px;">
      <el-button type="success" icon="Plus" @click="OpenAddDlg()" size="default">添加设备</el-button>
    </div>

    <div class="ledgerList">
      <el-table id="out" border :data="DeviceList" stripe style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="60" />
        <el-table-column align="center" label="是否在线" width="100">
          <template #default="scope">
            <!-- <div></div> -->
            <img :src="scope.row.online == 1 ? './img/zx_ico.png' : './img/zx_icol.png'" alt="">
          </template>
        </el-table-column>
        <el-table-column label="桩号" width="120">
          <template #default="scope">
            <div>{{ scope.row.stake ? f_GetZH(scope.row.stake) : '暂无桩号信息' }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="方向" width="60">
          <template #default="scope">
            <div>{{ scope.row.direction ? scope.row.direction.value == '1' ? '↓' : '↑' : '' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="160">
          <template #default="scope">
            <div>{{ scope.row.model ? scope.row.model.label : '' }} {{ scope.row.width + "*" + scope.row.height }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="300" />
        <el-table-column prop="ip" label="IP地址" width="220" />
        <el-table-column prop="ip" label="厂家" width="140">
          <template #default="scope">
            <div>{{ scope.row.factory.label }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div>
              <el-button size="default" type="primary" icon="Menu" @click="changeBoard(scope.row)">修改</el-button>
              <el-button size="default" type="danger" icon="DeleteFilled" @click="DelBoard(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="DeviceDlg" :title="DeviceTitle" width="650" :before-close="cancelDlg">
      <div class="addDevice">
        <el-form :inline="true" :model="DeviceForm" label-width="100" class="demo-form-inline">
          <div>
            <el-form-item label="设备名称">
              <el-input style="width: 430px !important;" v-model="DeviceForm.name" placeholder="请输入设备名称" />
            </el-form-item>
          </div>
          <el-form-item label="方向">
            <el-select v-model="DeviceForm.direction" placeholder="请选择设备方向">
              <el-option v-for="item in DirectionList" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="桩号">
            <el-input v-model="DeviceForm.stake" placeholder="请输入桩号" />
          </el-form-item>
          <el-form-item label="所属高速">
            <el-input v-model="DeviceForm.hw_code" placeholder="请选择所属高速" />
            <!-- <el-select v-model="DeviceForm.hw_code" placeholder="请选择所属高速">
              <el-option v-for="item in highWatlist" :label="item.name" :value="item.code" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="设备厂家">
            <el-select v-model="DeviceForm.factory" placeholder="请选择设备厂家">
              <el-option v-for="item in FactoryList" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="DeviceForm.model" placeholder="设备类型">
              <el-option v-for="item in ModelList" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input v-model="DeviceForm.width" placeholder="请输入宽度" />
          </el-form-item>
          <el-form-item label="高度">
            <el-input v-model="DeviceForm.height" placeholder="请输入高度" />
          </el-form-item>
          <el-form-item label="IP">
            <el-input v-model="DeviceForm.ip" placeholder="请输入IP地址" />
          </el-form-item>
          <el-form-item label="端口号">
            <el-input v-model="DeviceForm.port" placeholder="请输入端口号" />
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="DeviceForm.addr" placeholder="请输入地址" />
          </el-form-item>
          <el-form-item label="代理IP">
            <el-input v-model="DeviceForm.proxy_ip" placeholder="请输入代理IP地址" />
          </el-form-item>
          <el-form-item label="代理端口号">
            <el-input v-model="DeviceForm.proxy_port" placeholder="请输入代理端口号" />
          </el-form-item>
          <el-form-item label="代理地址">
            <el-input v-model="DeviceForm.proxy_addr" placeholder="请输入代理地址" />
          </el-form-item>
          <el-form-item label="经度">
            <el-input v-model="DeviceForm.longitude" placeholder="请输入经度" />
          </el-form-item>
          <el-form-item label="纬度">
            <el-input v-model="DeviceForm.latitude" placeholder="请输入纬度" />
          </el-form-item>
          <el-form-item label="">
            <el-button v-show="DeviceTitle == '添加情报板'" type="primary" icon="StarFilled"
              @click="getGeom()">地图拾取</el-button>
            <el-button v-show="DeviceTitle == '修改情报板'" type="primary" icon="StarFilled"
              @click="changeGeom()">修改坐标</el-button>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelDlg()" icon="Close" type="info">取消</el-button>
          <el-button type="primary" icon="Check" @click="sureEditDevice()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import $sys from '../../api/sys';
import { ElMessage, ElMessageBox } from 'element-plus';
import { mainStore } from "../../store/index";
import { useRouter } from 'vue-router';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

const $router = useRouter();
const $store = mainStore();
const DeviceList = ref([]);
const DeviceDlg = ref(false);
const DeviceTitle = ref('添加情报板');

//没有绑定高速公路
const DeviceForm = ref({
  direction: '0',
  hw_code: 'S98',
  factory: 'sunway',
  model: 'f'
});

function f_GetZH(zh) {
  let number = Number(zh).toFixed(3) + "";
  return "K" + number.split(".")[0] + "+" + number.split(".")[1];
  // var m_zh = parseInt(zh);
  // if (zh - m_zh == 0) {
  //   return "K" + m_zh + "+000";
  // }
  // else {
  //   var bmz = parseInt((zh - m_zh) * 1000) + "";
  //   if (bmz.length == 1) {
  //     bmz = "00" + bmz;
  //   }
  //   else if (bmz.length == 2) {
  //     bmz = "0" + bmz;
  //   }
  //   return "K" + m_zh + "+" + bmz;
  // }
}
function initDeviceForm() {
  DeviceForm.value.direction = '0';
  DeviceForm.value.hw_code = 'S98';
  DeviceForm.value.factory = 'sunway';
  DeviceForm.value.model = 'f';
}
function OpenAddDlg() {
  DeviceTitle.value = '添加情报板';
  DeviceDlg.value = true;
}
onMounted(() => {
  getDeviceList();
  //厂家列表
  getDeviceFactory();
  // 型号列表
  getModelList();
  getDirection();
  //getHighWay();
  checkCatch();
})
function changeBoard(e) {
  DeviceTitle.value = '修改情报板';
  $sys.getDeviceByID(e.id).then(res => {
    if (res.code == 200) {
      DeviceForm.value = res.data;
      DeviceForm.value.hw_code = res.data.hw_code;
      DeviceForm.value.direction = res.data.direction ? res.data.direction.value : '';
      DeviceForm.value.factory = res.data.factory ? res.data.factory.value : '';
      DeviceForm.value.model = res.data.model ? res.data.model.value : '';
      DeviceDlg.value = true;
    }
  })
}
function DelBoard(e) {
  ElMessageBox.confirm(
    `确定删除该设备吗?`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    $sys.DelDevice(e.id).then(res => {
      if (res.code == 200) {
        ElMessage({
          message: '删除成功!',
          type: 'success'
        })
        getDeviceList();
      }
    })
  })
}
function sureEditDevice() {
  if (checkDeviceForm()) {
    if (DeviceTitle.value == '添加情报板') {
      $sys.addDevice(DeviceForm.value).then(res => {
        if (res.code == 200) {
          ElMessage({
            message: '添加成功!',
            type: 'success'
          })
          cancelDlg();
          getDeviceList();
        }
      })
    } else {
      $sys.updDevice(DeviceForm.value).then(res => {
        if (res.code == 200) {
          ElMessage({
            message: '修改成功!',
            type: 'success'
          })
          cancelDlg();
          getDeviceList();
        }
      })
    }
  }
}
function cancelDlg() {
  for (let key in DeviceForm.value) {
    DeviceForm.value[key] = '';
    $store.catchLon = '';
    $store.catchLat = '';
    $store.tempTitle = '';
    DeviceDlg.value = false;
  }
  initDeviceForm();
}
function checkCatch() {
  if ($store.catchLon != '') {
    DeviceTitle.value = $store.tempTitle;
    DeviceForm.value = $store.tempData;
    DeviceForm.value.longitude = $store.catchLon;
    DeviceForm.value.latitude = $store.catchLat;
    DeviceDlg.value = true;
  }
}
function changeGeom() {
  $store.tempData = DeviceForm.value;
  $store.tempTitle = DeviceTitle.value;
  $store.m_showGISMap = true;
  $store.catchFlag = true;
  // ElMessage({
  //   message: '拖动图标选择位置',
  //   type: 'info'
  // })
}
function getGeom() {
  $store.tempData = DeviceForm.value;
  $store.tempTitle = DeviceTitle.value;
  $router.push({
    name: 'Gis'
  })
  ElMessage({
    message: '左键点击地图拾取坐标',
    type: 'info'
  })
  $store.catchFlag = true;
}
function getDeviceList() {
  $sys.deviceList().then(res => {
    if (res.code == 200) {
      console.log(111, res.data);
      DeviceList.value = res.data;
    }
  })
}
const FactoryList = ref([]);
function getDeviceFactory() {
  $sys.getDeviceFactory().then(res => {
    if (res.code == 200) {
      FactoryList.value = res.data;
    }
  })
}
const ModelList = ref([]);
function getModelList() {
  $sys.getDeviceModel().then(res => {
    if (res.code == 200) {
      ModelList.value = res.data;
    }
  })
}
const DirectionList = ref([]);
function getDirection() {
  $sys.getDirectionList().then(res => {
    if (res.code == 200) {
      DirectionList.value = res.data;
    }
  })
}
const highWatlist = ref([]);
function getHighWay() {
  $sys.getHighWayList().then(res => {
    if (res.code == 200) {
      highWatlist.value = res.data;
    }
  })
}
function checkDeviceForm() {
  let flag = false;
  if (!DeviceForm.value.name || DeviceForm.value.name == '') {
    ElMessage({
      message: '设备名称不能为空!',
      type: 'warning'
    })
    flag = false;
  } else if (!DeviceForm.value.stake || DeviceForm.value.stake == '') {
    ElMessage({
      message: '设备桩号不能为空!',
      type: 'warning'
    })
    flag = false;
  } else if (!DeviceForm.value.width || DeviceForm.value.width == '') {
    ElMessage({
      message: '设备宽度不能为空!',
      type: 'warning'
    })
    flag = false;
  } else if (!DeviceForm.value.height || DeviceForm.value.height == '') {
    ElMessage({
      message: '设备高度不能为空!',
      type: 'warning'
    })
    flag = false;
  } else if (!DeviceForm.value.ip || DeviceForm.value.ip == '') {
    ElMessage({
      message: '设备IP地址不能为空!',
      type: 'warning'
    })
    flag = false;
  } else if (!DeviceForm.value.port || DeviceForm.value.port == '') {
    ElMessage({
      message: '设备端口号不能为空!',
      type: 'warning'
    })
    flag = false;
  } else if (!DeviceForm.value.longitude || DeviceForm.value.longitude == '') {
    ElMessage({
      message: '经度不能为空!',
      type: 'warning'
    })
    flag = false;
  } else if (!DeviceForm.value.latitude || DeviceForm.value.latitude == '') {
    ElMessage({
      message: '纬度不能为空!',
      type: 'warning'
    })
    flag = false;
  } else {
    flag = true;
  }
  return flag;
}
</script>

<style scoped>
:deep(*) {
  font-size: 16px;
}

#ledger {
  height: calc(100vh - 135px);
  /* height: 100%; */
  background-color: #2F4052;
  padding: 10px;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner),
:deep(.el-select__wrapper) {
  background-color: #34475b !important;
  border: 1px solid #2b3b4b !important;
  box-shadow: none !important;

}

:deep(.el-input__inner),
:deep(.el-textarea__inner),
:deep(.el-select__placeholder) {
  color: #ccc !important;
}

:deep(.el-form-item__label) {
  color: white;
}

:deep(.addDevice .el-select) {
  width: 150px !important;
}

:deep(.el-scrollbar__wrap--hidden-default) {
  background-color: #2F4052;
}



:deep(.addDevice .el-input) {
  width: 150px !important;
}

:deep(.el-dialog) {
  background-color: #2F4052 !important;
}

:deep(.el-dialog__title),
:deep(.el-dialog__body) {
  color: white !important;
}

:deep(.ledgerList .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
  background: none;
}

:deep(.ledgerList .el-table__inner-wrapper) {
  &::before {
    display: none;
  }
}

:deep(.ledgerList .el-table__header-wrapper th) {
  background-color: #2F4052;
  color: #fff;
}

:deep(.ledgerList .el-table__row) {
  background-color: #2F4052;
  color: #B2C9EE;
}



:deep(.ledgerList .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even)>td) {
  background-color: #263343 !important;
}

:deep(.ledgerList .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td) {
  background-color: #2F4052 !important;
}

:deep(.ledgerList .el-table__body tr:nth-child(even)) {
  background-color: #263343;
}

:deep(.ledgerList .el-table--fit .el-table__inner-wrapper:before) {
  display: none !important;
}

:deep(.el-table__cell) {
  border: 1 !important;
  border-color: #263342;
}

:deep(.el-table--border .el-table__inner-wrapper:after),
:deep(.el-table--border:after),
:deep(.el-table__border-left-patch) {
  background-color: #263342;
}

.ledgerList {
  /* padding: 10px; */
  background-color: #2F4052;
  /* height: 700px; */
  overflow: auto;
  width: 100%;
}

.ledgerList::-webkit-scrollbar {
  width: 5px;
}

.ledgerList::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* 设置滚动条的颜色 */
  border-radius: 6px;
  /* 设置滚动条的圆角 */
}

.ledgerList::-webkit-scrollbar-track {
  background-color: #888;
  border-radius: 6px;
  /* 设置滚动条的轨道颜色 */
}
</style>

<style lang='less'>
.el-message-box {
  background-color: #2f4052 !important;
}

.el-message-box__message,
.el-message-box__title {
  color: #fff;

}

#ledger {
  .el-button>span {
    font-size: 14px !important;
  }

  .el-table__cell {
    border: 1 !important;
    border-color: #222e3b;
  }


  .el-scrollbar {
    height: calc(100vh - 240px);
  }

  // .el-scrollbar__wrap{height: calc(100vh - 240px);}
}
</style>